<template>
	<view class="w-100">
		<u-navbar title="兑换积分" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" class="navBarHeight" />
		
		<view class="p-30 border-box">
			<view class="content-item">
				<view class="flex justify-between">
					<view class="line-h-40 font-16 font-b">选择资产支付</view>
					<view class="detail1 color-r line-h-40" @click="goTo('/pages/my/exchange/record')">兑换记录</view>
				</view>
				<scroll-view class="scroll-view" scroll-x>
					<view class="flex flex-col m-r-40 assets-item" v-for="(item,index) in mixedPaymentList" :key="index" @tap="assetsChangeRadio(index)">
						<view class="m-b-20 flex-row-center flex-col-center b-r-10 p-t-30 p-b-30 bg-white-f5 position-r w-100">
							<view class="radio-act" v-if="index === payAssetsMethodIndex">
								<u-icon name="checkmark-circle-fill" color="#e60000" size="20"></u-icon>
							</view>
							<view class="radio" v-else></view>
							<image mode="aspectFill" style="width: 200rpx;height: 260rpx;" :src="item.assetsAccessUrl"></image>
						</view>
						<view class="w-100 font-b line-1">{{item.assetsName}}</view>
						<view class="font-13"><text class="color-b">总数:</text>{{item.exchangeNum}}</view>
						<view class="font-13"><text class="color-b">今日最低价:</text>{{item.assetsAvgPrice}}</view>
						<view class="font-13"><text class="color-b">价值:</text>{{item.assetsTotalPrice}}</view>
					</view>
				</scroll-view>
				<view v-if="!mixedPaymentList.length" class="flex flex-col flex-row-center flex-col-center m-b-20">
					<image src="@/static/index/no-data.png"></image>
					<view style="color: #999999" @tap="goTo('/pages/webview/chain')">暂无资产，请前往流转平台购买资产</view>
					<!-- <view class="m-t-30" style="color: #999999" @tap="$goTo('/pages/webview/chain')">点击跳转流转平台</view> -->
				</view>
			</view>
			<view class="content-item">
				<view class="title">兑换积分</view>
				<view class="payMethod justify-between">
					<view class="payItem w-48 flex-row-center flex-col-center" v-for="(item,index) in pointType"
						@tap="pointIndex=index" :key="index" :class="index===pointIndex?'active':''">
						<view class="font-b m-b-10">{{item.name}}</view>
						<view class="font-12" :class="index===pointIndex?'color-r':'color-b'">资产积分兑换比例：1:{{item.value}}
						</view>
					</view>
				</view>
			</view>
			<view class="content-item">
				<view class="title">资产支付</view>
				<input type="number" :maxlength="9" class="p-20 b-r-10 bg-white-f5" placeholder="请输入资产金额" v-model="assetsCount" />
				<view class="font-12 m-t-10 flex justify-between">
					<text class="color-b">首次兑换资产金额必须大于20000</text>
					<text class="color-r">预计扣除资产数量:{{ exchangeCount }}</text>
				</view>
				<view class="font-12 m-t-10">
					<text class="color-b" v-if="serviceChargeTotal">手续费: {{serviceChargeTotal||0}}</text>
					<text class="color-r m-l-5" v-if="serviceChargeTotal">(资产数量:{{ serviceChargeTotalNum || 0 }}个)</text>
				</view>
			</view>
		</view>
		<view class="p-30 border-box">
			<u-button text="提交" type="primary" style="background: #E60000;border-radius: 40rpx;border: none" @click="saveVoucher"  />
		</view>
<!--		<u-modal :show="areaShow" title="确认" @confirm="confirmAdd" @cancel="cancelAdd" :showCancelButton="true">-->
<!--			<view class="slot-content">-->
<!--				<input type="text" v-model="userPassword" placeholder="请输入账户密码" class="inputPwd" />-->
<!--			</view>-->
<!--		</u-modal>-->

        <payPassword ref="payPasswordRef" @pay="handlePay"></payPassword>
	</view>
</template>

<script>
	import payPassword from '@/components/payPassword/payPassword.vue'
	import { augmentPlatformPoints, orderAssets, storepoints, totalIncome, getExchangeNum } from '@/common/api/exchange.js'
	import { Debounce } from "@/common/utils/tools.js";
	export default {
        components: {
            payPassword
        },
		data() {
			return {
				pointType: [{
					name: '千积分',
					pointsType: 1,
				},
				// {
				// 	name: '百积分',
				// 	pointsType: 2,
				// }
				],
				pointIndex: 0,
				mixedPaymentList: [],
				payAssetsMethodIndex: 0,
				assetsCount: null, //资产数量
				// walletData:{},
				userPassword: null,//登陆密码
				areaShow: false,//密码输入框
                payCipher: '',
				serviceChargeNum: null,// 手续费百分比
				serviceChargeTotal: null,//手续费
				serviceChargeTotalNum: null,//资产抵扣手续费个数

			}
		},
		onShow() {
			this.getExchangeNums()
			this.getFindMixedPayment()
			this.getStorepoints(1)
			this.getStorepoints(2)
			// this.getTotalIncome()
		},
		computed: {
			exchangeCount() {
				let num = 0;
				if ( !this.assetsCount ) {
					this.serviceChargeTotal = 0
					this.serviceChargeTotalNum = 0
					return 0
				}else{
					let total = Number(this.assetsCount)
					let handCharge = Number(this.assetsCount)*Number(this.serviceChargeNum)
					let price = Number(this.mixedPaymentList[this.payAssetsMethodIndex?this.payAssetsMethodIndex:0]?.assetsAvgPrice)
					num = Math.ceil(total / price);
					this.serviceChargeTotal = (handCharge).toFixed(2)
					this.serviceChargeTotalNum = Math.ceil(handCharge / price)
				}
				return num
			}
		},
		methods: {
			getExchangeNums(){
				getExchangeNum().then(res => {
					if(res.code === 200){
						this.serviceChargeNum = Number(res.msg);
					}
				})
			},

			// 获取平台积分
			// getTotalIncome(){
			// 	totalIncome({walletId:12}).then(res=>{
			// 		if(res.code===200){
			// 			this.walletData = res.data
			// 		}
			// 	})
			// },


            handlePay(password){
                this.confirmAdd(password)
            },


			// 注销账号
			confirmAdd:Debounce(function (password={}) {
				// if(!this.userPassword){
				// 	this.areaShow = true
				// 	return
				// }

                if(!password.password){
                    this.$refs.payPasswordRef.show = true
                    return
                }


				let parmas = {
					assetsId: this.mixedPaymentList[this.payAssetsMethodIndex].assetsId,
					userId:this.mixedPaymentList[this.payAssetsMethodIndex].userId,
					assetsCount: this.assetsCount,
					pointsType: this.pointType[this.pointIndex].pointsType,
					price: this.mixedPaymentList[this.payAssetsMethodIndex].assetsAvgPrice,
					userPassword: this.userPassword,
                    payCipher: password.password
				}
				augmentPlatformPoints(parmas).then(res => {
					if (res.code === 200) {
						this.$msg('兑换成功')
						this.assetsCount=''
						this.payAssetsMethodIndex = ''
						this.userPassword = null
						this.areaShow = false
						this.getFindMixedPayment()
						// this.getTotalIncome()
                        // this.$refs.payPasswordRef.close()
					}else{
						this.$msg(res.msg)
					}
				})
			},800),
			cancelAdd(){
				this.areaShow = false
			},
			//选择资产
			assetsChangeRadio(index) {
				if (index !== this.payAssetsMethodIndex){
					this.payAssetsMethodIndex = index
				}
			},
			//获取积分信息
			getStorepoints(type) {
				storepoints(type).then((res) => {
					if (res.code == 200) {
						if (type === 1) {
							this.pointType[0].value = res.data
						} else {
							if(this.pointType[1] && this.pointType[1].value){
								this.pointType[1].value = res.data
							}
						}
					}
				})
			},
			// 提交
			saveVoucher() {
				if(!this.mixedPaymentList.length){
					return this.$msg('暂无资产，无法兑换积分!')
				}
				if (this.payAssetsMethodIndex === '') {
					return this.$msg('请选择资产支付')
				}
				if (this.assetsCount === '') {
					return this.$msg('请输入资产金额')
				}
				this.assetsCount=Number(this.assetsCount)
				if (!uni.$u.test.digits(this.assetsCount)) {
					return this.$msg('资产支付金额需为正整数')
				}
				if((this.assetsCount/this.mixedPaymentList[this.payAssetsMethodIndex].assetsAvgPrice)>this.mixedPaymentList[this.payAssetsMethodIndex].exchangeNum){
					return this.$msg('资产金额不足')
				}
				this.confirmAdd();//兑换积分
			},
			//获取资产钱包
			getFindMixedPayment() {
				orderAssets().then((res) => {
					if (res.code == 200) {
						this.mixedPaymentList = res.data || []
					}
				})
			},
			goTo(url){
				uni.navigateTo({
					url: url
				})
			}
		}

	}
</script>

<style lang="scss" scope>
	.w-48{
		width: 48%;
	}
	page {
		background: #FFFFFF;
	}
	.inputPwd{
		display: block;
		padding: 0 20rpx;
		height: 88rpx;
		width: 100%;
		border-radius: 10rpx;
		background-color: #f5f5f5;
		color: #000;
	}
	.detail{
		border-radius: 40rpx;
		padding: 4rpx 20rpx;
		border: 2rpx solid #333;
	}
	.detail1{
		border-radius: 40rpx;
		padding: 4rpx 20rpx;
		border: 2rpx solid #e60000;
	}
	.container {
		background-color: #FFFFFF !important;
	}

	.content-item {
		margin-bottom: 30rpx;
	}


	.title {
		font-weight: 700;
		font-size: 30rpx;
		margin-bottom: 14rpx;
	}

	.payItem {
		padding: 10rpx 0;
		text-align: center;
		border: 1px solid #cccccc;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.active {
		color: red;
		background: #fde3e4;
		border: 1px solid red;
	}

	.payMethod {
		display: flex;
		margin: 0 auto;
		margin-bottom: 10px;

	}

	.scroll-view {
		white-space: nowrap;
	}

	.assets-item {
		display: inline-flex;
		width: 200rpx;
		position: relative;

		.cover {
			width: 200rpx;
			height: 140rpx;
		}

		.radio-act {
			position: absolute;
			right: 5rpx;
			top: 5rpx;
			z-index: 11;
		}

		.radio {
			width: 38rpx;
			height: 38rpx;
			background: #fff;
			border: 1px solid #e1e1e1;
			border-radius: 100%;
			position: absolute;
			right: 5rpx;
			top: 10rpx;
			z-index: 11;
		}


	}

	input {
		height: 90rpx;
	}
	.border-btn01{
		padding: 10rpx 24rpx;
		height: max-content;
		font-size: 28rpx;
		border-radius: 30rpx;
	}
</style>
